<template>
    <div>
        <appHeader :titles='"首页"'/>
        <personalInfo/>
       <div class="taskShow">
           <router-link to='/task'>
                <h3>任务列表</h3>
                <p>任务一：邀请好友赚伙食费</p>
           </router-link>
       </div>
        <appDetails/>
        <appFooter/>
    </div>
</template>
<script>
import appHeader from '../header/header'
import personalInfo from '../personalInfo/personalInfo'

import appDetails from '../details/details'
import appFooter from '../footer/appFooter'
export default {
  name: 'home',
  components: {
    appHeader,
    personalInfo,
    appDetails,
    appFooter
  }
}
</script>
<style lang="scss">
$em-base: 75;
@import '../../common/mixin/_bourbon.scss';
.taskShow {
  height: rem(175px);
  padding: 0 rem(26px);
  background-color: #ffffff;
  margin-top: rem(47px);
  background-image: url('./right.png');
  background-repeat: no-repeat;
  background-position: 96% center;

  h3 {
    padding-left: rem(100px);
    height: rem(60px);
    line-height: rem(60px);
    font-size: 24px;
    color: #353535;
    padding-top: rem(20px);
    padding-bottom: rem(20px);
    background: url('./task1.png') no-repeat left center;
  }
  p {
    font-size: 20px;
    color: #353535;
    margin-top: rem(10px);
    margin-left: rem(40px);
  }
}
</style>

